<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单详情</h2>
  </header>
  <div class="detail-head-tip mb20">订单{{mainlist.State | orderState}}</div>
  <div class="page">
    <!-- <div class="detail-tip ft14 cf">
      <p class="f-l">订单号：{{bbilllist.BBillNo}}</p>
      <p class="f-r">{{bbilllist.BillDate}}</p>
    </div> -->
    <div class="form-line2 displayflex" @click="map(bbilllist.Guid)">
      <div class="left green">发</div>
      <dl class="ctx flex1">
        <dt>{{mainlist.DepartureProvince | province}}{{mainlist.DepartureCity | city}}{{mainlist.DepartureDistrict | district}}{{mainlist.DepartureAddress}}</dt>
        <dd>{{mainlist.PickContacts}}  {{mainlist.PickContactsTel}} </dd>
      </dl>
      <i class="iconfont icon-right"></i>
    </div>
    <div class="form-line2 displayflex" @click="map(bbilllist.Guid)">
      <div class="left yellow">收</div>
      <dl class="ctx flex1">
        <dt>{{mainlist.ArrivalProvince | province}}{{mainlist.ArrivalCity | city}}{{mainlist.ArrivalDistrict | district}}{{mainlist.ArrivalAddress}}</dt>
        <dd>{{mainlist.SendContacts}}  {{mainlist.SendContactsTel}} </dd>
      </dl>
      <i class="iconfont icon-right"></i>
    </div>
    <!-- <div class="detail-goods mb20">
      <div class="ft17 tit">商品信息</div>
      <div class="ctx" v-if="goodslist.length > 0">
        <div class="ft17 displayflex detail" v-for="item in goodslist">
          <div class="flex1 goods-unit">
            <p>{{item.GoodsName}}</p>
            <span class="ft14">{{item.GoodsSpec}} {{item.Unit}}</span>
          </div>
          <div class="price"><span class="org">{{item.Pcks}}</span>{{item.Unit}}</div>
        </div>
      </div>
    </div> -->
    <div class="detail-goods mb20">
      <div class="ft17 tit">装箱照片</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in handoverPict">
          <div class="pic" @click="previewPic1(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <previewer :list="list1" ref="previewer1"></previewer>

    <div class="detail-data mb20 ft14">
      <p class="displayflex">件数<span class="flex1"></span><em>{{mainlist.OrdersPKGS}}件</em></p>
      <p class="displayflex">重量<span class="flex1"></span><em>{{mainlist.OrdersWeight}}kg</em></p>
      <p class="displayflex">体积<span class="flex1"></span><em>{{mainlist.OrdersVolumn}}m³</em></p>
      <p class="displayflex" v-if="ownerTypes.indexOf(userinfo.UserBizType) > -1">运费<span class="flex1"></span><em class="org">￥{{mainlist.CarrierAmount}}</em></p>
      <p class="displayflex" v-else>运费<span class="flex1"></span><em class="org">￥{{mainlist.CarrierAmount | DriverFee}}</em></p>
      <p class="displayflex">货运险<span class="flex1"></span><em v-if="mainlist.InsuranceAmount > 1">{{mainlist.InsuranceAmount}}万</em><em v-else>已赠送1万元保额</em></p>
    </div>
    <div class="detail-num mb20 ft14">
      <p>订单编号：{{bbilllist.BBillNo}}</p>
      <p v-if="bbilllist.State=='B01'">是否加急：否</p><p v-if="bbilllist.State=='B05'">是否加急：是</p>
      <p v-if="mainlist.ConsignTime">取货时间：{{mainlist.ConsignTime | timeshort}}</p>
      <p v-if="mainlist.ReceiveTime">签收时间：{{mainlist.ReceiveTime | timeshort}}</p>
      <p v-if="mainlist.LastArrivalArrivedDate" id="arrData">要求到达时间：{{mainlist.LastArrivalArrivedDate | timeshort}}</p>
    </div>
    <div class="detail-num mb20 ft14">
      <p>备注：{{mainlist.Memo}}</p>
       <p v-if="mainlist.ExcpetionReason">异常原因: {{mainlist.ExcpetionReason}}</p>
    </div>
    <previewer :list="list2" ref="previewer2"></previewer>
    <previewer :list="list3" ref="previewer3"></previewer>
    <previewer :list="list4" ref="previewer4"></previewer>
    <div class="detail-goods mb20" v-if="HandoverPictJJ52.length > 0">
      <div class="ft17 tit">提货凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ52">
          <div class="pic" @click="previewPic2(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-goods mb20" v-if="HandoverPictJJ56.length > 0">
      <div class="ft17 tit">交货凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ56">
          <div class="pic"  @click="previewPic3(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-goods mb20" v-if="HandoverPictJJ81.length > 0">
      <div class="ft17 tit">签收凭证</div>
      <ul class="pic-ctx cf">
        <li v-for="(item , index) in HandoverPictJJ81">
          <div class="pic"  @click="previewPic4(index)">
            <img :src="item | simpleImgUrl">
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- <div class="total-footer displayflex">
    <div class="flex1 num">共<span class="org">{{mainlist.OrdersPKGS}}</span>件</div>
    <div class="displayflex">
      <div class="btn btn-sm flex1" v-if="mainlist.State=='11'" @click="onlineOrder(bbilllist.Guid)">修改订单</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State=='12'" @click="driver(bbilllist.Guid)">选择配送员</div>
      <div class="btn btn-sm flex1" v-if="mainlist.State>51">配送详情</div>
      <div class="btn btn-sm flex1"
           v-if="$route.query.step=='1'"
           @click="pickUp">拍照取货</div>
      <div class="btn btn-sm flex1" v-if="$route.query.step=='2'"
           @click="pickUp">交货</div>
    </div>
  </div> -->
</div>
</template>

<script>
export default {
  name:'orderDetail',
  data() {
    return {
      bbilllist: [],
      mainlist: [],
      goodslist: [],
      HandOver: [],
      bbillno: "",
      showLoad: true,
      handoverPict: [],
      HandoverPictJJ: [],
      HandOver52: [],
      HandOver56: [],
      HandOver81: [],
      HandoverPictJJ52: [],
      HandoverPictJJ56: [],
      HandoverPictJJ81: [],
      list1: [],
      list2: [],
      list3: [],
      list4: [],
      ownerTypes : ['Cargowner','Cargoreceiver','warehouse'],
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  methods: {
    previewPic1: function(index) {
      this.$refs.previewer1.show(index);
    },
    previewPic2: function(index) {
      this.$refs.previewer2.show(index);
    },
    previewPic3: function(index) {
      this.$refs.previewer3.show(index);
    },
    previewPic4: function(index) {
      this.$refs.previewer4.show(index);
    },
    goBack() {
      this.$router.go(-1);
    },
    driver(guid) {
      this.$router.push({
        path: "/driverList",
        query: { id: guid }
      });
    },
    map(guid) {
      this.$router.push({
        path: "/map",
        query: { id: guid }
      });
    },
    getData() {
      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetail", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist = resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.HandOver = resp.Data.HandOver;
          self.HandOver52 = resp.Data.HandOver52;
          self.HandOver56 = resp.Data.HandOver56;
          self.HandOver81 = resp.Data.HandOver81;

          if (self.mainlist.PictContentPkg) {
            self.handoverPict = JSON.parse(self.mainlist.PictContentPkg);
            //重组list
            for (var i = 0; i < self.handoverPict.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.handoverPict[i]
              };
              self.list1.push(value);
            }
          }
          if (self.HandOver && self.HandOver.HandoverPict) {
            self.HandoverPictJJ = JSON.parse(self.HandOver.HandoverPict);
          }

          if (resp.Data.HandOver52 && self.HandOver52.HandoverPict) {
            self.HandoverPictJJ52 = JSON.parse(self.HandOver52.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ52.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ52[i]
              };
              self.list2.push(value);
            }
          }
          if (resp.Data.HandOver56 && self.HandOver56.HandoverPict) {
            self.HandoverPictJJ56 = JSON.parse(self.HandOver56.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ56.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ56[i]
              };
              self.list3.push(value);
            }
          }
          if (resp.Data.HandOver81 && self.HandOver81.HandoverPict) {
            self.HandoverPictJJ81 = JSON.parse(self.HandOver81.HandoverPict);
            //重组list
            for (var i = 0; i < self.HandoverPictJJ81.length; i++) {
              var value = {
                src: "https://image.csyaoly.com" + self.HandoverPictJJ81[i]
              };
              self.list4.push(value);
            }
          }
        }
      });
    },
    pickUp() {
      //提货，交货跳转
      this.$router.push({
        path: "/pickUp",
        query: {
          step: this.$route.query.step
        }
      });
    },
    onlineOrder(guid) {
      //修改订单
      this.$router.push({
        path: "/onlineOrder",
        query: { id: guid, type: "1" }
      });
    }
  }
};
</script>